/*
微信商品列表
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加商品</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改商品</el-button>
      <el-button type="primary" @click="handleAddUpdateSale()" v-repeatClick>添加特价</el-button>
      <el-button type="danger" @click="delSale" v-repeatClick>删除特价</el-button>
      <el-button @click="view" v-repeatClick>查看</el-button>
      <el-button @click="getGoods" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delGoods" v-repeatClick>删除商品</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card  style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <div>
            <el-form ref="search" :model="search" inline size="small">
              <el-form-item label="" prop="goodsName">
               <el-input placeholder="商品名称" v-model="search.goodsName"></el-input>
              </el-form-item>
              <el-form-item label="" prop="inSale">
                <el-select
                  v-model="search.inSale"
                  placeholder="是否特价"
                >
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="shippingGoodsTypeTag">
                <el-select
                  v-model="search.shippingGoodsTypeTag"
                  placeholder="货物类型"
                >
                  <el-option
                    v-for="item in baseFormOptions.shippingGoodsTypeTag"
                    :key="item"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="shippingGoodsType">
                <el-select
                  v-model="search.shippingGoodsType"
                  placeholder="商品类型"
                >
                  <el-option
                    v-for="item in baseFormOptions.shippingGoodsType"
                    :key="item"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="query_batchId">
                <el-button type="primary" round @click="getGoods"
                >搜索</el-button
                >
                <el-button
                  type="warning"
                  round
                  @click="$refs.search.resetFields()"
                >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table
            height="100%"
            :data="data"
            border
            stripe
            highlight-current-row
            ref="multipleTable"
            @row-dblclick="handleRowDbclick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" width="55" align="center">
            </el-table-column>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="scope" style="margin-left:100px">
                <el-form label-position="left"  class="demo-table-expand" label-width="120px">
                  <el-form-item label="商品名称">
                    <el-link @click="handleRowDbclick(scope.row)">{{ scope.row.shippingGoods.goodsName }}</el-link>
                  </el-form-item>
                  <el-form-item label="商品简介">
                    <span>简介：{{scope.row.shippingGoods.introduction}}</span>
                  </el-form-item>
                  <el-form-item label="SKU编码">
                    <span>{{ scope.row.mailGoods.skuCode}}</span>
                  </el-form-item>
                  <el-form-item label="商品中文名称">
                    <span>{{ scope.row.mailGoods.goodsName}}</span>
                  </el-form-item>
                  <el-form-item label="商品英文名称">
                    <span>{{ scope.row.mailGoods.englishBrand}}</span>
                  </el-form-item>
                  <el-form-item label="商品规格">
                    <span>{{ scope.row.mailGoods.specification}}</span>
                  </el-form-item>
                  <el-form-item label="库存">
                    <span>{{ scope.row.mailGoods.inventory}}</span>
                  </el-form-item>
                  <el-form-item label="商品详情">
                    <el-button  v-if="scope.row.shippingGoods.goodsId">
                      <router-link :to="{path:'/parts/mailfree/freegoods',query:{id:scope.row.shippingGoods.goodsId}}" target="_blank">查看商品</router-link>
                    </el-button>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" >
              <template slot-scope="scope">
                <el-link @click="handleRowDbclick(scope.row)">{{ scope.row.shippingGoods.goodsName }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="商品价格" width="100">
              <template slot-scope="scope">
                {{scope.row.mailGoods.price}} $
              </template>
            </el-table-column>
            <el-table-column label="活动价格" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.shippingGoodsSale && scope.row.shippingGoodsSale.salePrice">{{scope.row.shippingGoodsSale.salePrice}} $</span>
                <span v-else>暂未加入活动</span>
              </template>
            </el-table-column>
            <el-table-column label="商品图片"  align="center" width="150px">
              <template slot-scope="scope" >
                <el-image style="width: 100px; height: 100px"
                          :src="getImagePath(scope.row.shippingGoods.publicityPictures[0])"
                          :preview-src-list="scope.row.shippingGoods.publicityPictures.map(item=>getImagePath(item))">
                  <div slot="error" class="image-slot" style="line-height: 100px;font-size: 30px;">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>

            <el-table-column label="所属类型">
              <template slot-scope="scope">
                {{scope.row.shippingGoods.shippingGoodsTypeTag.join(',')}}
              </template>
            </el-table-column>
            <el-table-column label="商品类型">
              <template slot-scope="scope">
                {{scope.row.shippingGoods.shippingGoodsType.join(',')}}
              </template>
            </el-table-column>
            <el-table-column label="商品标签">
              <template slot-scope="scope">
                <div>
                  标签信息：
                  <el-tag
                  :key="tag"
                  v-for="tag in scope.row.shippingGoods.shippingGoodsTags">
                  {{tag}}
                </el-tag>
                </div>
                <div style="margin-top: 10px" v-if="scope.row.shippingGoods.notice.length">
                  注意事项：{{scope.row.shippingGoods.notice.join(',')}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="特价">
              <template slot-scope="scope">
              <div style="">
                是否特价：<span style="font-size: 20px">
                <i
                  class="el-icon-circle-check"
                  style="color: #67c23a"
                  v-if="scope.row.shippingGoodsSale"
                ></i>
                <i
                  class="el-icon-circle-close"
                  style="color: #f56c6c"
                  v-else
                ></i>
              </span>
              </div>
                <div style="margin-top: 10px" v-if="scope.row.shippingGoodsSale && scope.row.shippingGoodsSale.salePrice">
                  起始日期：{{scope.row.shippingGoodsSale.startTime}} - {{scope.row.shippingGoodsSale.endTime}}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页区 -->
        <div style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200, 500, 1000]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>

    <el-dialog
      v-dialog-drag
      :title="title + '商品'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      @close="restForm"
    >
      <div style="position: relative">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" name="baseForm">
            <el-form
              size="small"
              :model="baseForm"
              label-position="left"
              label-width="120px"
              ref="baseForm"
              :rules="baseRules"
            >
              <el-form-item prop="shippingGoods.goodsName" label="包邮商品">
                <div style="display: flex;justify-content: space-between">
                  <el-select
                    filterable
                    style="width: 100%"
                    @change="hanldeGoodsChange"
                    v-model="baseForm.shippingGoods.goodsName"
                    placeholder="请选择包邮商品">
                    <el-option
                      v-for="item in baseFormOptions.goodsList"
                      :key="item.id"
                      :value="item.id"
                    >
                      <span style="margin-right:10px">SKU编码：{{item.skuCode}}</span>
                      <span  style="margin-right:10px">商品中文名称：{{item.goodsName}}</span>
                      <span  style="margin-right:10px">商品英文名称：{{item.englishBrand}}</span>
                      <span  style="margin-right:10px">商品规格：{{item.specification}}</span>
                      <span  style="margin-right:10px">售价：{{item.price}}</span>
                      <span  style="margin-right:10px">库存：{{item.inventory}}</span>
                    </el-option>
                  </el-select>
                  <el-button style="margin-left:20px" v-if="baseForm.shippingGoods.goodsName">
                    <router-link :to="{path:'/parts/mailfree/freegoods',query:{id:baseForm.shippingGoods.goodsId}}" target="_blank">查看商品</router-link>
                  </el-button>
                </div>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="所属类型" prop="shippingGoods.shippingGoodsTypeTag">
                    <el-select
                      v-model="baseForm.shippingGoods.shippingGoodsTypeTag"
                      placeholder="所属类型"
                      style="width: 100%"
                      multiple
                    >
                      <el-option
                        v-for="item in baseFormOptions.shippingGoodsTypeTag"
                        :key="item"
                        :value="item"
                        :label="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品类型" prop="shippingGoods.shippingGoodsType">
                    <el-select
                      style="width: 100%"
                      v-model="baseForm.shippingGoods.shippingGoodsType"
                      multiple
                      placeholder="商品类型"
                    >
                      <el-option
                        v-for="item in baseFormOptions.shippingGoodsType"
                        :key="item"
                        :value="item"
                        :label="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item prop="shippingGoods.introduction" label="商品简介">
                <el-input placeholder="商品简介" v-model="baseForm.shippingGoods.introduction">
                </el-input>
              </el-form-item>
              <el-form-item prop="shippingGoods.publicityPictures" label="商品图片" v-if="dialogFormVisible">
                <upload-image :images="baseForm.shippingGoods.publicityPictures"></upload-image>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="是否特价">
                    <el-radio-group v-model="isSale">
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="baseForm.mailGoods.price">
                  <el-form-item label="原始价格">
                    {{baseForm.mailGoods.price}} $
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="isSale">
                <el-col :span="8">
                  <el-form-item prop="shippingGoodsSale.salePrice" label="特价价格" >
                    <el-input-number v-model="baseForm.shippingGoodsSale.salePrice"  controls-position="right" :precision="2" :step="0.1" style="width: 100%" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="开始结束日期" prop="shippingGoodsSale.date">
                    <el-date-picker
                      v-model="baseForm.shippingGoodsSale.date"
                      type="datetimerange"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      format="yyyy-MM-dd HH:mm:ss"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00','23:59:59']">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item prop="shippingGoods.notice" label="注意事项">
                <el-input placeholder="购买商品注意事项" v-model="baseForm.shippingGoods.notice">
                </el-input>
              </el-form-item>
              <el-form-item prop="shippingGoods.shippingGoodsTags" label="标签信息">
                <el-tag
                  :key="tag"
                  v-for="tag in baseForm.shippingGoods.shippingGoodsTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                  :class="{'margin-left-unset':!baseForm.shippingGoods.shippingGoodsTags.length}"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput" :class="{'margin-left-unset':!baseForm.shippingGoods.shippingGoodsTags.length}">+ 新增</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="参数规格" name="specification">
            <editor ref="editor"></editor>
          </el-tab-pane>
          <el-tab-pane label="产品实拍" name="productPic" >
            <div style="text-align: center" >
              <upload-image :images="baseForm.shippingGoods.goodsFilmImages" v-if="dialogFormVisible"></upload-image>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div style="position: absolute; top: 5px; right: 0">
          <el-button
            v-if="title!='查看'"
            type="primary"
            style="margin-left: 10px"
            @click="submit"
            v-repeatClick
          ><i class="fa fa-floppy-o" style="margin-right: 10px" ></i>保存商品</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-dialog-drag
      :title="'限时特价商品'"
      :visible.sync="dialogFormVisible1"
      :close-on-click-modal="false"
      @close="restForm"
      width="1200px"
    >
      <div style="position: relative">
        <el-form :model="goodsSaleForm"
                 size="small"
                 label-position="left"
                 label-width="120px"
                 ref="goodsSaleForm">
          <el-form-item label="开始结束日期" prop="date" :rules="[$RegExp.required('请选择日期')]">
            <el-date-picker
              v-model="goodsSaleForm.date"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00','23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-table :data="goodsSaleForm.goodsSaleContent" border>
            <el-table-column label="操作" align="center" width="80">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  circle
                  icon="el-icon-close"
                  @click="deleteGoods(scope.$index)"
                ></el-button>
              </template>
            </el-table-column>
            <el-table-column label="特价商品">
              <template slot-scope="scope">
                <el-select v-model="scope.row.goodsName" clearable filterable @change="handleGoodsChange(scope.row)">
                  <el-option v-for="goods in goodsSaleFormOptions.allGoods" :key="goods.shippingGoods.goodsId" :value="goods.shippingGoods.goodsId" :label="goods.shippingGoods.goodsName"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="货物图片"  align="center">
              <template slot-scope="scope" >
                <el-image style="width: 100px; height: 100px"
                          :src="getImagePath(scope.row.pictures[0])"
                          :preview-src-list="scope.row.pictures.map(item=>getImagePath(item))">
                  <div slot="error" class="image-slot" style="line-height: 100px;font-size: 30px;">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="skuCode" label="SKU编码"></el-table-column>
            <el-table-column prop="englishBrand" label="英文品牌"></el-table-column>
            <el-table-column prop="specification" label="规格型号"></el-table-column>
            <el-table-column prop="inventory" label="库存"></el-table-column>
            <el-table-column prop="price" label="原始价格"></el-table-column>
            <el-table-column label="活动价格" >
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.salePrice"  controls-position="right" :precision="2" :step="0.1" style="width: 100%" :min="0"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: right; margin-top: 10px">
            <el-link type="primary" :underline="false" @click="addGoods">
              <el-button icon="el-icon-plus" type="primary" circle>
              </el-button>
              添加特价商品
            </el-link>
          </div>
          <el-row :gutter="20" style="margin-top:30px">
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
                <el-button type="primary" @click="submit1">保存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>

let search = {
  goodsName:'',
  inSale:'',
  //货物类型
  shippingGoodsTypeTag:'',
  //商品类型
  shippingGoodsType:'',
};

//折扣信息
let sale = {
  goodsId:'',
  salePrice:'',
  //sku
  skuCode:'',
  //中文名称
  goodsName:'',
 //英文名称
  englishBrand:'',
  //规格
  specification:'',
  //原始价格
  price:'',
  //库存
  inventory:'',
  //图片
  pictures:[]
}

let goodsSaleForm = {
  goodsSaleContent:[],
  date:[]
}

//身份证基本信息表单
let baseForm = {
  //附加信息
  additionalInfo:[
    { // 规格
      additionalContent:'',
      additionalName:'specification',
      goodsId:'',
    }
  ],
  shippingGoods:{
    id:0,
    //商品名称
    goodsName:'',
    //商品id
    goodsId:'',
    //货物类型
    shippingGoodsTypeTag:[],
    //商品类型
    shippingGoodsType:[],
    //商品轮播图
    publicityPictures:[],
    //注意事项
    notice:'',
    //标签信息
    shippingGoodsTags:[],
    //商品简介
    introduction:'',
    //详情图片
    goodsFilmImages:[]
  },
  mailGoods:{
    id:0,
    userAdded:false,
    //是否审核
    auditAble: true,
    //中文品牌，必填
    chineseBrand: "",
    //海关编码
    customsCode: "",
    //海关申报单价
    customsPrice: "",
    //是否启用
    enabled: true,
    //英文品牌，必填
    englishBrand: "",
    //图片路径
    goodsImages: [],
    //商品名称，必填
    goodsName: "",
    //商品类型ID，必填
    goodsType: "",
    //商品类型名称，必填
    goodsTypeName: "",
    //材质
    material: "",
    //计量单位，必填
    measureUnit: "",
    //详细信息
    note: "",
    //产地
    originPlace: "",
    //价格
    price: 0,
    //SKU编码，必填
    skuCode: "",
    //规格
    specification: "",
    //所属仓库ID，必填
    storeId: "",
    //所属仓库名称，必填
    storeName: "",
    //重量
    weight: "",
    //库存
    inventory:0
  },
  shippingGoodsSale:{
    date:[],
    goodsSaleId:'',
    salePrice:'',
  }
};

import {
  getMailGoods
} from "@/api/parts/mailfree/freegoods";

import {
  addGoodsSale,
  modGoodsSale,
  delGoodsSale
} from "@/api/wx/goodssale";
import {getImage} from '@/api/common'
import myHeader from "@/components/pageHEader/pageHeader";
import { dateFormat } from "@/utils";
import {
  getGoods,
  getGoodsById,
  addGoods,
  delGoods,
  modGoods,
  getGoodsUnsale
} from "@/api/wx/goods";
import uploadImage from '../parts/components/uploadImage'
import editor from '../parts/components/editor'
export default {
  name: "goods",
  components: {
    myHeader,
    uploadImage,
    editor
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      //搜索
      search: this.cloneObj(search),
      activeName: "baseForm",
      //对话框
      dialogFormVisible: false,
      title: "添加",
      baseForm: this.cloneObj(baseForm),
      baseRules: {
        'shippingGoods.goodsName': [this.$RegExp.required('请选择包邮商品')],
        'shippingGoods.shippingGoodsTypeTag': [this.$RegExp.required('请选择所属类型')],
        'shippingGoods.shippingGoodsType': [this.$RegExp.required('请选择商品类型')],
        'shippingGoods.introduction': [this.$RegExp.required()],
        'shippingGoodsSale.salePrice': [this.$RegExp.required()],
      },
      baseFormOptions:{
        goodsList:[],
        shippingGoodsTypeTag:[
          '保税区',
          '直邮中国',
          '本地自购',
        ],shippingGoodsType:[
          '奶粉专区',
          '母婴用品',
          '保健品',
          '食品专区',
          '护肤品',
        ],
      },
      //是否特价
      isSale:false,
      //标签
      inputVisible: false,
      inputValue: '',
      //折扣相关
      goodsSaleForm:this.cloneObj(goodsSaleForm),
      goodsSaleFormOptions:{
        allGoods:[]
      },
      //对话框
      dialogFormVisible1: false,
      title1: "添加",
      //
    };
  },
  created() {
    let query = {
      pageNum: 1,
      pageSize: 500,
    }
    getMailGoods(query).then(resp=>{
      this.baseFormOptions.goodsList = resp.data.records
    })
    getGoodsUnsale(query).then(resp=>{
      this.goodsSaleFormOptions.allGoods = resp.data.records
    })
  },
  mounted() {
    this.getGoods();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGoods()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getGoods()
    },
    getImagePath(path){
      return getImage(path)
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
        if (this.$refs.goodsSaleForm) this.$refs.goodsSaleForm.resetFields();
      });
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row) {
      this.activeName = "baseForm";
      //修改处理
      if (row) {
        //将数据复制给form
        this.handleModform(this.cloneObj(row), this.baseForm);
        if(!row.shippingGoodsSale){
          this.baseForm.shippingGoodsSale = this.cloneObj(baseForm.shippingGoodsSale)
          this.isSale = false
        }else{
          this.baseForm.shippingGoodsSale.date = [this.baseForm.shippingGoodsSale.startTime,this.baseForm.shippingGoodsSale.endTime]
          delete this.baseForm.shippingGoodsSale.startTime
          delete this.baseForm.shippingGoodsSale.endTime
          this.isSale = true
        }
        this.baseForm.shippingGoods.notice = this.baseForm.shippingGoods.notice.join('')
        this.$nextTick(()=>{
          this.$refs.editor.setContent(row.additionalInfo.filter(item=>item.additionalName === 'specification')[0].additionalContent)
        })
        this.dialogFormVisible = true;
        this.title = "修改";
        // getGoodsById(row.shippingGoods.id).then(resp=>{
        //   let row = resp.data
        //
        // })
      } else {
        this.isSale = false
        this.baseForm = this.cloneObj(baseForm);
        this.title = "添加";
        this.dialogFormVisible = true;
        this.$nextTick(()=>{
          this.$refs.editor.setContent('')
        })
      }
    },
    handleAddUpdateSale(row){
      //修改处理
      if (row) {

      } else {
        this.goodsSaleForm = this.cloneObj(goodsSaleForm);
        if(this.multipleSelection.length){
          this.multipleSelection.forEach(item=>{
            let sale = {}
            let goods = item.mailGoods
            sale.goodsName = goods.goodsName
            sale.goodsId = goods.id
            sale.skuCode = goods.skuCode
            sale.englishBrand = goods.englishBrand
            sale.specification = goods.specification
            sale.inventory = goods.inventory
            sale.pictures = item.shippingGoods.publicityPictures
            sale.price = goods.price
            sale.salePrice = item.shippingGoods.salePrice?item.shippingGoods.salePrice:''
            this.goodsSaleForm.goodsSaleContent.push(this.cloneObj(sale));
          })
          //取出第一个特价商品 起始时间
          let firstSale = this.multipleSelection.filter(item=>item.shippingGoodsSale)[0]
          if(firstSale){
            this.goodsSaleForm.date = [firstSale.shippingGoodsSale.startTime,firstSale.shippingGoodsSale.endTime]
          }

        }else{
          this.addGoods()
        }
        this.title1 = "添加";
        this.dialogFormVisible1 = true;
      }
    },
    getGoods() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        inSale: this.search.inSale,
        goodsName: this.search.goodsName,
        shippingGoodsTypeTag: this.search.shippingGoodsTypeTag,
        shippingGoodsType: this.search.shippingGoodsType
      };
      getGoods(query).then((resp) => {
        this.data =  resp.data.records
        this.total = resp.data.total;
      });
    },
    //包邮商品改变时
    hanldeGoodsChange(val){
      if(val){
        let row = this.baseFormOptions.goodsList.filter(item=>item.id === val)[0]
        this.handleModform(row, this.baseForm.mailGoods);
        this.baseForm.shippingGoods.goodsId = val
        this.baseForm.shippingGoods.goodsName = row.goodsName
        this.baseForm.shippingGoods.publicityPictures = row.goodsImages
        this.baseForm.additionalInfo.forEach(item=>{
          item.goodsId = val
        })
      }else{
        this.handleModform(baseForm.mailGoods, this.baseForm.mailGoods);
      }
    },
    //标签信息
    handleClose(tag) {
      this.baseForm.shippingGoods.shippingGoodsTags.splice(this.baseForm.shippingGoods.shippingGoodsTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.baseForm.shippingGoods.shippingGoodsTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addGoods() {

      this.goodsSaleForm.goodsSaleContent.push(this.cloneObj(sale));
      console.log(this.goodsSaleForm.goodsSaleContent,'sale')
    },
    deleteGoods(index) {
      if(this.goodsSaleForm.goodsSaleContent.length>1){
        this.confirm().then(() => {
          this.goodsSaleForm.goodsSaleContent.splice(index, 1);
        });
      }else{
        this.$message.error('删除失败，特价商品至少有一条内容！')
      }
    },
    handleGoodsChange(row){
      getGoodsById(row.goodsName).then(resp=>{
        let goods = resp.data.mailGoods
        row.goodsName = goods.goodsName
        row.goodsId = goods.id
        row.skuCode = goods.skuCode
        row.englishBrand = goods.englishBrand
        row.specification = goods.specification
        row.inventory = goods.inventory
        row.pictures = resp.data.shippingGoods.publicityPictures
        row.price = goods.price
      })
    },
    submit() {
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          let submit = this.cloneObj(this.baseForm)
          let request;
          submit.shippingGoods.notice = [submit.shippingGoods.notice]
          submit.additionalInfo.filter(item=>item.additionalName === 'specification')[0].additionalContent = this.$refs.editor.getContent()
          if(this.isSale){
            submit.shippingGoodsSale.startTime = submit.shippingGoodsSale.date[0]
            submit.shippingGoodsSale.endTime = submit.shippingGoodsSale.date[1]
            delete submit.shippingGoodsSale.date
          }else{
            delete submit.shippingGoodsSale
          }
          if (this.title == "添加") {
            request = addGoods(submit);
          } else {
            request = modGoods(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getGoods();
          });
        } else {
          this.activeName = "baseForm";
        }
      });
    },
    submit1() {
      this.$refs["goodsSaleForm"].validate((valid) => {
        if (valid) {
          if(this.goodsSaleForm.goodsSaleContent.some(item=>!parseInt(item.salePrice))){
            this.$message.error('特价价格不能为空！')
            return;
          }
          if(this.goodsSaleForm.goodsSaleContent.some(item=>!item.goodsId)){
            this.$message.error('特价商品不能为空！')
            return;
          }
          let submit = this.cloneObj(this.goodsSaleForm)
          submit.startTime = submit.date[0]
          submit.endTime = submit.date[1]
          delete submit.date
          let goodsSaleContent = submit.goodsSaleContent.map(item=>({salePrice:item.salePrice,goodsId:item.goodsId}))
          submit.goodsSaleContent = goodsSaleContent
          let request;
          if (this.title == "添加") {
            request = addGoodsSale(submit);
          } else {
            request = modGoodsSale(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible1 = false;
            this.getGoods();
          });
        }
      })
    },
    //查看
    view() {
      this.handleBeforeUpdate();
      this.title = '查看';
    },
    //删除特价
    delSale() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if(this.multipleSelection.every(item=>!item.shippingGoodsSale)){
        this.tip('没有可删除的特价商品！');
        return;
      }
      this.confirm().then(() => {
        delGoodsSale(this.multipleSelection.map((item) => item.shippingGoodsSale && item.shippingGoodsSale.goodsSaleId)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getGoods();
          }
        );
      });
    },
    //删除
    delGoods() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delGoods(this.multipleSelection.map((item) => item.shippingGoods.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getGoods();
          }
        );
      });
    },

  },
};
</script>

<style scoped lang='scss'>
.self-textarea{
  /deep/ .el-form-item__content{
    margin-left:0px !important;
  }
}
.display-img{
  position:relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  div{
    background: rgba(0,0,0,.3);
    height: 30px;
    display: none;
  }
  i{
    font-size: 16px;
    position:absolute;
    top: 5px;
    right: 5px;
  }
  &:hover div {
    display: block;
    z-index: 10000;
  }
}

/deep/ .el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 150px;
  margin-left: 10px;
  vertical-align: bottom;
}
.margin-left-unset{
  margin-left:0px
}
</style>
